<template>
  <div>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <div class="priceField">
            <input type="text" placeholder="最高价格" />
            <input type="text" placeholder="最低价格" />
          </div>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-card
      class="goodscard"
      v-for="item in goodslist"
      :key="item.proid"
      :price="item.sales"
      :desc="item.desc"
      :title="item.proname"
      :thumb="item.img1"
      @click="goGoodsDetail(item.proid)"
    />
 
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "dropdown",
  components: {},
  created() {
    this.category = this.$route.query.category;
    this.brand = this.$route.query.brand;
   
    axios({
      url: "api/pro/categorybrandprolist",
      params: {
        brand: this.brand,
        category: this.category,
      },
    })
      .then((res) => {
        console.log("res.data", res.data.data);

        this.goodslist = res.data.data;
      })
      .catch((err) => {
        console.log("err", err);
      });
    axios({
      url: "api/pro/search",
      params: {
        keyword: this.keyword,
      },
    })
      .then((res) => {
        console.log("res.data", res.data.data);

        this.goodslists = res.data.data;
      })
      .catch((err) => {
        console.log("err", err);
      });
  },
  data() {
    return {
      value: 0,
      goodslist: [],
      goodslists: [],
      switch1: false,
      switch2: false,
      option: [
        { text: "全部商品", value: 0 },
        { text: "升序", value: 1 },
        { text: "降序", value: 2 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    goGoodsDetail(id) {
      this.$router.push("/GoodsDetail/" + id);
    },
  },
};
</script>

<style scoped>
.priceField {
  display: flex;
}
.priceField input {
  border: 0;
  height: 3rem;
  padding-left: 1rem;
}
</style>